
<script setup lang="ts">
import { getProcureOrderListApi, updateProcureApi } from '@/apis/order'
import uploadExcel from '@/components/uploadExcel/uploadExcel.vue'
import CyPage from '@/components/CyPage/CyPage.vue';
import procureDialog from './components/procureDialog.vue';
import reissueDialog from './components/reissueDialog.vue';
import sendGoodDialog from './components/sendGoodDialog.vue';
import takeGoodDialog from './components/takeGoodDialog.vue';

/** 订单状态 */
const STATUS = [
    { value: -1, label: '全部', type: ''  },
    /** 待采购 */
    { value: 0, label: '待采购', type: 'warning' },
    /** 待发货 */
    { value: 1, label: '待发货', type: 'warning' },
    /** 待收货 */
    { value: 2, label: '待收货', type: 'success' },
    /** 已收货但是错误、待补发 */
    { value: 3, label: '补发', type: 'danger' }
]

/** 表格列表 */
const tableData = ref([])

/** 是否显示上传组件 */
const showUploadDialog = ref(false)

/** 总页数 */
const total = ref(0)

/** 加载中 */
const loading = ref(false)

/** 表格实例 */
const tableRef = ref()

/** 搜索 */
const searchParams = ref({
    g_time: '',
    status: -1,
    page: 1,
    limits: 10
})

/** 新增弹出控制显示隐藏 */
const dialogVisible = ref({
    procure: false,
    reissue: false,
    sendGood: false,
    takeGood: false,
})

/** 编辑弹出参数 */
const updateInfo = ref({})

/** 获取状态名称 */
const getStatusName = (status, key = 'label') => {
    const item = STATUS.find(item => item.value === status)
    return item[key]
}

/** 获取列表 */
const getOrder = async () => {
    loading.value = true

    const data = await getProcureOrderListApi(searchParams.value)
    tableData.value = data.list
    total.value = data.total
    loading.value = false
    scrollToTop()
}

/** 滚动到顶部 */
const scrollToTop = () => {
    tableRef.value.setScrollTop(0)
}

/** 是否隐藏操作按钮 */
const isHideBtn = ref(false)

/** 重置 */
const reset = () => {
    searchParams.value = {
        g_time: '',
        status: -1,
        page: 1,
        limits: 20
    }
    getOrder()
}


/** 打开新增弹窗 */
const openDialog = (row, type: string, status: number, hideBtn = false) => {
    const { _id = '', ch_order_num = '', ch_order_track_num = '', ch_order_repair = '', ch_order_info = '', open_inventory = 2 } = row.procure_info[0] || {}
    updateInfo.value = {
        id: _id,
        order_id: row._id,
        status,
        ch_order_num,
        ch_order_track_num,
        ch_order_repair,
        ch_order_info,
        open_inventory,
        shop_sku: row.shop_sku,
        order_quantity: row.order_quantity,
    }
    isHideBtn.value = hideBtn
    dialogVisible.value[type] = true

}

/** 打开查看补货信息 */
const lookDialog = (row) => {
    openDialog(row, 'reissue', 3, true)
}

/** 是否展示修改发货信息按钮 */
const isShowUpdateSendGoodBtn = (row) => {
    const { status } = row
    const { ch_order_repair = '' } = row.procure_info[0] || {}
    return status === 2 && !ch_order_repair
}

/** 是否展示查看补货信息按钮 */
const isShowUpdateTakeGoodBtn = (row) => {
    const { status } = row
    const { ch_order_repair = '' } = row.procure_info[0] || {}
    return status === 2 && ch_order_repair
}

/** 格式化时间 */
const formatter = (row) => {
  return row.g_time ? new Date(Number(row.g_time)).toISOString().replace("T", " ").slice(0, 19) : ''
}

onMounted(() => {
    getOrder()
})
</script>

<template>
    <div class="procure-container">
        <div class="search-box">
            <el-form inline>
                <el-form-item label="订单状态">
                    <el-select v-model="searchParams.status" class="YYYY-MM-DD" placeholder="请选择订单状态">
                        <el-option v-for="item in STATUS" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-date-picker v-model="searchParams.g_time" type="date" value-format="YYYY-MM-DD" placeholder="请选择订单下单时间" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getOrder">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="table-box">
            <div class="operate-btn">
                <el-button type="primary" @click="showUploadDialog = true">上传店小秘订单</el-button>
            </div>
            <el-table ref="tableRef" border :data="tableData" stripe style="width: 100%" v-loading="loading" height="calc(100vh - 260px)">
                <el-table-column prop="tup" label="图片" width="100">
                    <template v-slot="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.shop_img"
                            :preview-src-list="[scope.row.shop_img]" fit="cover" />
                    </template>
                </el-table-column>
                <el-table-column prop="kui_weight" label="采购状态" min-width="100">
                    <template v-slot="scope">
                        <el-tag  effect="light" :type="getStatusName(scope.row.status, 'type')">{{ getStatusName(scope.row.status) }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="shop_sku" label="sku" min-width="150" />
                <el-table-column prop="shop_ch_name" label="商品信息" min-width="200">
                    <template v-slot="scope">
                        <div class="line-m">
                            <div>
                                {{ scope.row.shop_ch_name }} * {{scope.row.order_quantity}}
                            </div>
                            <div>{{ scope.row.shop_gg }}</div>
                            
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="shop_ch_name" label="国际订单信息" min-width="320">
                    <template v-slot="scope">
                        <div class="line-m">
                            <div>
                                订单号：{{ scope.row.order_num }}
                            </div>
                            <div>快递单号：{{ scope.row.shop_wl_num }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="g_time" label="采购信息" min-width="200">
                    <template v-slot="scope">
                        {{ scope.row.procure_info.length ? scope.row.procure_info[0].ch_order_info : '' }}
                    </template>
                </el-table-column>
                <el-table-column prop="g_time" label="国内订单信息" min-width="320">
                    <template v-slot="scope">
                         <!-- 库存 -->
                         <div v-if="scope.row.procure_info.length ? scope.row.procure_info[0].open_inventory === 1 : false">
                            <el-tag class="ml-2" type="success">使用库存</el-tag>
                        </div>
                        <div class="line-m" v-else>
                            <div>
                                订单号：{{ scope.row.procure_info.length ? scope.row.procure_info[0].ch_order_num : '' }}
                            </div>
                            <div>快递单号：{{ scope.row.procure_info.length ? scope.row.procure_info[0].ch_order_track_num : ''
                            }}</div>
                        </div>
                        
                    </template>
                </el-table-column>
                
                <el-table-column prop="g_time" label="下单时间" width="180" :formatter="formatter" />
                <el-table-column fixed="right" label="操作" width="160" align="center">
                    <template v-slot="scope">
                        <el-button type="text" v-if="scope.row.status === 0" @click="openDialog(scope.row, 'procure', 1)">采购</el-button>
                        <el-button type="text" v-if="scope.row.status === 1" @click="openDialog(scope.row, 'procure', 1)">修改采购</el-button>
                        <el-button type="text" v-if="scope.row.status === 1" @click="openDialog(scope.row, 'sendGood', 2)">发货</el-button>
                        <el-button type="text" v-if="isShowUpdateSendGoodBtn(scope.row)" @click="openDialog(scope.row, 'sendGood', 2)">修改发货</el-button>
                        <el-button type="text" v-if="isShowUpdateTakeGoodBtn(scope.row)" @click="lookDialog(scope.row)">查看补货</el-button>
                        <el-button type="text" v-if="scope.row.status === 2" @click="openDialog(scope.row, 'takeGood', 4)">收货</el-button>
                        <el-button type="text" v-if="scope.row.status === 3" @click="openDialog(scope.row, 'reissue', 4)">添加补发说明</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <cy-page :total="total" v-model:page="searchParams.page" v-model:limit="searchParams.limits" @pagination="getOrder"></cy-page>
        </div>

        <!-- 上传店小秘订单 -->
        <upload-excel :otherParams="{status: 0}" @confirm="getOrder" :status="1" title="店小蜜采购订单" v-model:visible="showUploadDialog" />

        <!-- 采购弹窗 -->
        <procure-dialog :info="updateInfo" @confirm="getOrder" v-model:visible="dialogVisible.procure" />

        <!-- 发货弹窗 -->
        <send-good-dialog :info="updateInfo" @confirm="getOrder" v-model:visible="dialogVisible.sendGood" />

        <!-- 收货弹窗 -->
        <take-good-dialog :info="updateInfo" @confirm="getOrder" v-model:visible="dialogVisible.takeGood" />

        <!-- 补发弹窗 -->
        <reissue-dialog :hideBtn="isHideBtn" :info="updateInfo" @confirm="getOrder" v-model:visible="dialogVisible.reissue" />

        
    </div>
</template>

<style lang="scss" scoped>
.procure-container {
    .line-m {
        min-height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: left;
    }
}
</style>

